<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.stext{
				width: 25%;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right:1px solid #C7C7CC;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 10px;
			}
			::-webkit-input-placeholder{
				font-size: 0.8em;
				color: #999999;
			} 
			.sjx{
				margin: auto;
				width: 0;
				height: 0;
			    border:10px solid transparent;
				border-top: 10px solid #000000;
				position: relative;
				top: 20%;
			}
			.butclass{
				width: 90%;
				margin: auto;
			}
			.maindiv>div{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-content: center;
				padding: 0.2em;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title" id="title">扣次</h1>
		</header>
		<div class="mui-content">
		    <div class="content">
		    	<div class="search">
		    		<div class="stext fe09" id="stext">
		    			手机
		    			<div class="sjx">
		    			</div>
		    		</div>
		    		<div class="ssdiv">
		    			<input id="keyvalue" class="ssinp" type="" name="" id="" value=""  placeholder="请输入手机号/卡号/姓名"/>
		    		</div>
		    		<div class="simg" onclick="getmember()">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="main" id="mianlist">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-02-16
                	描述：
               
		    	<div class="maindiv">
		    		<div id="">
		    			<span id="">
		    				
		    			</span>
		    			<span id="">
		    				
		    			</span>
		    		</div>
		    		<div id="">
		    			<span id="">
		    				
		    			</span>
		    			<span id="">
		    				
		    			</span>
		    		</div>
		    	</div>
		    	 <ul class="mui-table-view">
		    	     <li class="mui-table-view-cell mui-media">
		    	         <a href="javascript:;">
		    	             <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
		    	             <div class="mui-media-body">
		    	                 幸福
		    	                 <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
		    	             </div>
		    	         </a>
		    	     </li>
		    	 </ul>
		    	 -->
		    </div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//原 次卡查询会员页面， 暂时无用
			var titile = "",type = 1;
			window.onload = function(){
				
				mui.ready(function() {
                var stextPicker = new mui.PopPicker();
                stextPicker.setData([{
                    value: '1',
                    text: '手机号'
                }, {
                    value: '2',
                    text: '卡号'
                }, {
                    value: '3',
                    text: '用户名'
                }]);
                var stext = document.getElementById('stext');
                stext.addEventListener('tap', function(event) {
                    stextPicker.show(function(items) {
                        stext.innerHTML = items[0].text + '<div class="sjx"></div>';
                        type = items[0].value;
                    });
                }, false);
              
            });
				
			}
			function getmember(){
				var data = {
					url:"/api/member/search",
					data:{
						access_token:acctoken(),
						key:g("keyvalue").value,
						type:type
					}
				}
				ajax(data,function(res){
					console.log("查找的会员",res);
					setmainlist(res.data.data);
				})
				
			}
			function setmainlist(data){
				var str = '<ul class="mui-table-view">';
				for(var i = 0 ; i < data.length; i++){
		    		str +=  '<li class="mui-table-view-cell mui-media" onclick="gopage('+data[i].id+')">'+
			   			    '<a href="javascript:;">'+
			   			    '<img class="mui-media-object mui-pull-left border50" src="'+data[i].headimg+'">'+
			   			    '<div class="mui-media-body">'+
			   			    data[i].username+
			   			    '<p class="mui-ellipsis">'+
			   			    data[i].phone+ ' | '+data[i].card_number+
			   			    '</p></div></a></li>';	
				}
				str += '</ul>';
				g("mianlist").innerHTML = str;
				
			}
			
			function gopage(mid){
				var list = {mid:mid};
				mui.openWindow({
					url:'memberInformation.html?mid='+mid,
					id:'memberInformation',
					extras:list
				})
			}
		</script>
	</body>

</html>